import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import service from '../../../api/index';
import { Value } from 'sass';

function Echarts(props: any) {
    let myChart: any = null

    useEffect(() => {
        getData();
        myChart = echarts.init(document.getElementById('main') || document.body);

    }, [])

    let getData = async () => {
        let res = await service.echarts.data_simpleData();
        // console.log(res.data.data);
        let datalist = res.data.data.map((item: any) => {
            return { name: item.x, value: item.val }
        })
        doEcharts(datalist);
    }

    let doEcharts = (datalist: any) => {
        // 绘制图表
        myChart.setOption({
            legend: {
                top: 'bottom'
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         mark: { show: true },
            //         dataView: { show: true, readOnly: false },
            //         restore: { show: true },
            //         saveAsImage: { show: true }
            //     }
            // },
            series: [
                {
                    name: '名字',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: datalist
                },
                
            ]

        });
    }


    return (
        <div className='echartsbox'>
            <div id="main" style={{ width: 700, height: 600, position: 'relative', left: '15%', top: 10 }}></div>
        </div>
    );
}

export default Echarts;